<template>
    <div style="height: 642px">
        <EmpManage v-if="this.$route.params.job === 'admin'"></EmpManage>
        <div v-else>
            <div style="height: 310px; margin-bottom: 20px" v-if="this.$route.params.job === 'manager'">
                <div style="height: 40px; border: 1px solid black">
                    <el-col :span="4" style="text-align: left; padding: 7px"><span class="header-span">阿米巴</span></el-col>
                    <el-col :span="20" style="text-align: right">
                        <el-button type="primary" size="medium" @click="getIndex('/deptAudit')">部门审核</el-button>
                        <el-button type="primary" size="medium" @click="getIndex('/allReport/manager')">部门报工</el-button>
                        <el-button type="primary" size="medium" @click="getIndex('/allFailReport/manager')">部门漏报</el-button>
                    </el-col>

                </div>
                <div style="height: 270px; border: 1px solid black">
                    <el-table
                        :data="managerTableData"
                        style="width: 100%"
                        :row-style="{height: '0'}"
                        :show-header="false"
                        height="270">
                        <el-table-column
                            width="30px">
                        </el-table-column>
                        <el-table-column
                            width="450px">
                            <template slot-scope="scope">
                                <span>{{ scope.row.summary }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column >
                            <template slot-scope="scope">
                                <el-button type="text" @click="toDeptAuditWithDate(scope.$index, scope.row)">立即审核>></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div style="height: 310px" >
                <div style="height: 40px; border: 1px solid black">
                    <el-col :span="4" style="text-align: left; padding: 7px"><span>漏报/退回</span></el-col>
                    <el-col :span="20" style="text-align: right">
                        <el-button type="primary" size="medium" @click="getIndex('/reportPage')">个人填报</el-button>
                        <el-button type="primary" size="medium" @click="getIndex('/allReport/emp')">个人报工</el-button>
                        <el-button type="primary" size="medium" @click="getIndex('/allFailReport/emp')">个人漏报</el-button>
                    </el-col>
                </div>
                <div id="emp-home" style="height: 270px; border: 1px solid black" >
                    <el-table
                        :data="empTableData"
                        style="width: 100%"
                        :row-style="{height: '0'}"
                        :show-header="false"
                        height="270">
                        <el-table-column
                            width="30px">
                        </el-table-column>
                        <el-table-column
                            width="150px">
                            <template slot-scope="scope">
                                <span>{{ scope.row.faildate }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            width="150px">
                            <template slot-scope="scope">
                                <span>{{ scope.row.failType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column >
                            <template slot-scope="scope">
                                <el-button type="text" @click="toReportPage(scope.$index, scope.row)">{{ scope.row.empBtnName}}>></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

import EmpManage from "@/views/admin_page/EmpManage.vue";
export default {
    name: "HomePage",
    data() {
        return {
            managerTableData: [],
            empTableData: [],
        }
    },
    components: {
        EmpManage
    },
    methods: {
        getIndex(path) {
            this.$router.push(path)
        },
        getDeptReportSummaryTable() {
            const self = this
            //获取deptno
            let deptno = this.$store.state.emp.deptno
            self.$http.post('getDeptReportInfoSummary', {deptno}).then(res => {
                let map = res.data
                for (const info of map) {
                    self.managerTableData.push({date: info.date, summary: info.date + info.summary})
                }

            }).catch(() => {
                self.$message.error('获取待审批报工失败，请联系管理员')
            })
        },
        //立即审核
        toDeptAuditWithDate(index, row) {
            //获取当前行的数据
            let date = row.date
            //带着date跳转到部门审核页面
            this.$router.push({name: 'deptAudit', query: {reportdate: date}})
        },
        getEmpFailReportTable() {
            const self = this
            let empno = this.$store.state.emp.empno
            let hiredate = this.$store.state.emp.hiredate
            self.$http.post('getAllFailReportdate', {empno, hiredate}).then(res => {
                let list = res.data
                for (const map of list) {
                    self.empTableData.push({faildate: map.dt,
                                            failType: map.return_reason == null ? '漏报' : '报工被驳回',
                                                empBtnName: map.return_reason == null ? '立即补报' : '重新填报'})
                }
            }).catch(() => {
                self.$message.error('获取漏报/驳回信息失败，请联系管理员')
            })
        },
        //立即补报或重新填报
        toReportPage(index, row) {
            let reportdate = row.faildate
            this.$router.push({name: 'reportPage', query: {reportdate}})
        }
    },
    created() {
        //加载列表
        this.getDeptReportSummaryTable()
        this.getEmpFailReportTable()
    }

}
</script>

<style scoped>
.header-span {
    margin-top: 5px;
}
button {
    margin-left: 5px;
    margin-top: 3px;
}
</style>